<template>
  <div class="mod-config">
    <!-- <el-button>查询</el-button> -->
    <!-- <el-button type="primary" @click="clickNewly()">新增</el-button> -->
    <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.code" v-for="item in editableTabs" :key="item.code">
        <!-- 表格 -->
      <el-table
      :data="tableData"
      :max-height="tableHeight"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="证书类型"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClickAdd(scope.row)" style="color:#178AEB" type="text" size="small">编辑</el-button>
      </template>
      </el-table-column>
      <!-- <el-table-column
        prop="title"
        label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClickUpdate(scope.row)" style="color:#e6a23c" type="text" size="small">修改</el-button>
      </template>
      </el-table-column> -->
      <el-table-column
        prop="title"
        label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="addOrUpdatePostpone(scope.row)" style="color:#178AEB" type="text" size="small">查看</el-button>
      </template>
      </el-table-column>
    </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 编辑 -->
  <el-dialog
  :title="this.row.name+'文章编辑'"
  :visible.sync="centerDialogVisible"
  @close="closeShut()"
  width="80%"
  center>
  <span>
    <!-- 表单 -->
  <el-form ref="dataForm" :model="articleData" label-width="80px">
  <el-form-item label="文章内容">
         <el-upload
            class="upload-intelligent"
            name="file"
            :headers="myHeader"
            list-type="picture"
            :action="uploadUrls()"
            :show-file-list="false"
            :multiple="false"
            :before-upload="beforeAvatarUpload"
            :on-error="onError"
            :on-success="onSuccess"
            >
          </el-upload>
     <quill-editor class="editor"
                    ref="myQuillEditor"
                    v-model="articleData.content"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                    @change="onEditorChange($event)">
      </quill-editor>
  </el-form-item>
    </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickUploading()">确 定</el-button>
  </span>
</el-dialog>
    <!-- 呈现 延期攻略 -->
    <el-dialog
    :visible.sync="postponeDialogVisible"
    width="70%"
    center>
    <span>
    <div class="ql-editor" v-html="this.articleData.content"></div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="postponeDialogVisible = false">关 闭</el-button>
      <!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> -->
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import merge from 'lodash/merge'
  // import CertificateType from '@/views/modules/certificate/certifirenewal/certifirenewal-type.vue'
  // import QueryModel from '@/views/modules/certificate/certifirenewal/query-model.vue'
  import Vue from 'vue'
  export default {
    data () {
      return {
        myHeader: {
          'token': Vue.cookie.get('token')
        },
        quillUpdateImg: false,
        limitNum: 1,
        tableHeight:0,
        heightis: 180,
        tableData:[],
        confInfos: [],
        jobs: [],
        articleData:{
          content:''
        },
        dataForm: {
          pIdType:'',
          idType: '',
          title:'',
          desc:''
        },
        centerDialogVisible:false,
        queryModelVisible: false,
        postponeDialogVisible: false,
        certificateinfoCrashVisible: false,
        flag: false,
        page:1,
        limit:100,
        id:'',
        sort:1,
        visible:1,
        value:'',
        pIdType:'',
        idType:'',
        row:{},
        activeName: '',
        loading: true,
        dataEmpty: true,
        editableTabs: [],
        isEdit: true,
        index: 0,
        params: {
          validityType: ''
        },
        dataRule: {
          idType: [
            { required: true, message: '请选择证书类型', trigger: 'blur' }
          ]
        },
        // content: null,
        editorOption: {
              modules: {
                toolbar: {
                  container: [
                        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                        ["blockquote", "code-block"], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                        [{ script: "sub" }, { script: "super" }], // 上标/下标
                        [{ indent: "-1" }, { indent: "+1" }], // 缩进
                        // [{'direction': 'rtl'}],                         // 文本方向
                        [{ size: ["small", false, "large", "huge"] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        [{ font: [] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ["clean"], // 清除文本格式
                        ["link", "image", "video"] // 链接、图片、视频
                      ], //工具菜单栏配置
                      handlers: {
                        image: function(value) {
                          if (value) {
                            // 触发input框选择图片文件
                            document.querySelector(".el-upload input").click();
                          } else {
                            this.quill.format("image", false);
                          }
                        },
                        // link: function(value) {
                        //   if (value) {
                        //     var href = prompt('请输入url');
                        //     this.quill.format("link", href);
                        //   } else {
                        //     this.quill.format("link", false);
                        //   }
                        // },
                      }
                }
                
              },
              placeholder: '请在这里添加延期详细描述', //提示
              readyOnly: false, //是否只读
              theme: 'snow', //主题 snow/bubble
              syntax: true, //语法检测
      }
      }
    },
    components: {
      // CertificateType,
      // QueryModel
    },
    created () {
      // this.getTypeList()
      // this.getInitJobs()
      this.tackHeight()

    },
    mounted () {
      this.initJobs()
    },
    watch: {
      editableTabs: {
        deep: true,
        handler(val) {
          if(val.length) {
            this.activeName = val[0].code
            this.handleClick({name: this.activeName})
          }
        }
      },
      articleData: {
        deep: true,
        handler(val){
          // console.log(val)
          if(val.content){
            var gt = new RegExp('&gt;', 'g')
            var lt = new RegExp('&lt;', 'g')
            val.content = val.content.replace(gt, '>')
            val.content = val.content.replace(lt, '<')
          }
        }
      }
    },
    methods: {
      tackHeight(){
      this.heightis = 140
      this.adjustTableHeight()
      },
      adjustTableHeight(){
      this.$nextTick(() => {
          console.log(window.innerHeight);
          this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
          console.log(this.tableHeight);
        })
      },
      // GUANBI
      closeShut(){
          // console.log(111);
          this.dataForm.pIdType = '',
          this.dataForm.idType= '',
          this.dataForm.title= '',
          this.dataForm.desc= ''
          },
      onSuccess(res, file, fileList){
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        // console.log(res)
        window.setTimeout(() => {
          let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == 0) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.remoteUrl + res.fileName)
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
        },0)
      },
      beforeAvatarUpload(file) {                 
     this.quillUpdateImg = true;
     },
     onError(err, file, fileList){
       // loading动画消失
        this.quillUpdateImg = false;
        this.$message.error("图片插入失败");
    },
      uploadUrls(){
        return this.$http.adornUrl(`/certificate/certificateInfo/upload`)
     },
      handleClick (tab, event) {
      this.$http({
          url: this.$http.adornUrl('/sys/education/list'),
          method: 'get',
          params: this.$http.adornParams({
                  // 'type': this.editableTabs.code
                  // 'pIdType':tab.name,
                  'pIdType': tab.name === 'all' ? '' : tab.name,
                  // 'pIdType':this.activeName,
                  'page':this.page,
                  'limit':this.limit
                })
        }).then(({data}) => {
          // console.log(data)
          if (data.code === 0) {
            this.tableData = data.confInfos
            // console.log(this.tableData);
          }
        })
      },
      initJobs () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            this.editableTabs[0].code = 'all'
            setTimeout(() => {
              // this.activeName = data[0].code
              this.activeName = 'all'
            })
          }
        })
      },
      // 编辑
      handleClickAdd(row){
      this.centerDialogVisible = true
      this.row = row
      console.log(this.row.name);
      this.$http({
          url: this.$http.adornUrl('/sys/education/getDetail/'),
          method: 'get',
          params: this.$http.adornParams({
          'name':row.value,
          'type':row.type
          })
        }).then(({data}) => {
          if (data.code === 0) {
          this.articleData = data.data
          // console.log(articleData)
          // this.centerDialogVisible = true
          if(data.data[0]){
          this.articleData = data.data[0]
          this.isEdit = true
          }else{
            this.articleData.content = ''
            this.isEdit = false
          }
          // this.articleData.content = this.articleData.content
          } else {
          this.$message.error.data.msg
          }
        })
      // console.log(this.row);
      },
      // 查看
      addOrUpdatePostpone(row){
        // console.log(row)
          this.$http({
          url: this.$http.adornUrl('/sys/education/getDetail/'),
          method: 'get',
          params: this.$http.adornParams({
          'name':row.value,
          'type':row.type
          })
        }).then(({data}) => {
          if (data.code === 0) {
          // console.log(111)
          this.postponeDialogVisible = true
          // console.log(222);
          if(data.data[0]){
          this.articleData = data.data[0]
          }else{
            this.articleData.content = ''
          }
          } else {
          this.$message.error.data.msg
          }
        })
      },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      // 确定上传
      clickUploading(){
        // console.log(this.row);
        this.isEdit ? this.edit() : this.addNew()
      },
      // 、修改
      edit(){
          this.$refs['dataForm'].validate((valid) => {
          if(valid){
           this.$http({
              url: this.$http.adornUrl(`/sys/education/update/`),
              method: 'post',
              params: this.$http.adornParams({
                // 'title':this.dataForm.title,
                // 'url':this.ruleForm.url,
                'sort':this.sort,
                'visible':this.visible,
                'id':this.articleData.id,
                'content':this.articleData.content,
                // 'source':this.ruleForm.source,
                'idType':this.row.id,
                'pIdType':this.row.type,
              })
            }).then(({data}) => {
              if (data.code === 0) {
                // console.log(data)
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.centerDialogVisible = false
                    // this.getPolicyList()
                    this.handleClick({name: this.activeName})
                    // this.$emit('refreshDataList')
                    this.$refs.dataForm.resetFields()
                  }
                })
              // this.$refs.ruleForm.resetField()
              } else {
                this.$message.error(data.msg)
                // this.$refs.ruleForm.resetFields()
              }
              
            })
            }
         })
      },
      // 新增
      addNew() {
        this.$refs['dataForm'].validate((valid) => {
          if(valid){
           this.$http({
              url: this.$http.adornUrl(`/sys/education/save/`),
              method: 'post',
              params: this.$http.adornParams({
                // 'title':this.dataForm.title,
                // 'url':this.ruleForm.url,
                'sort':this.sort,
                'visible':this.visible,
                'content':this.articleData.content,
                // 'source':this.ruleForm.source,
                'idType':this.row.id,
                'pIdType':this.row.type,
              })
            }).then(({data}) => {
              if (data.code === 0) {
                // console.log(data)
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.centerDialogVisible = false
                    // this.getPolicyList()
                    this.handleClick({name: this.activeName})
                    // this.$emit('refreshDataList')
                    this.$refs.dataForm.resetFields()
                  }
                })
              // this.$refs.ruleForm.resetField()
              } else {
                this.$message.error(data.msg)
                // this.$refs.ruleForm.resetFields()
              }
            })
            }
  })
      },
      // 失去焦点
          onEditorBlur(editor) {},
          // 获得焦点
          onEditorFocus(editor) {},
          // 开始
          onEditorReady(editor) {},
          // 值发生变化
          onEditorChange(editor) {
            this.content = editor.html;
            // console.log(editor);
          },
    },
    computed: {
       editor() {
            return this.$refs.myTextEditor.quillEditor;
          }
    },
  }
</script>

<style lang="scss" scoped>
    // .el-card__body {
    //   padding: 10px 20px 10px 10px;
    // }
    .mod-config{
      margin-left: 10px;
      padding: 15px;
    }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryForm{
      margin-top: 10px;
    }
    .redact{
      height: 600px;
      width: 600px;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .el-button--info {
      color: #1b92fb;
      background-color: #fff;
      border-color: #1b92fb;
    }

  .el-tabs__nav-wrap::after{
    content:none
  }
  // .queryFormed{
  //  margin-top: 8px;
  // }
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;
     .el-tabs__nav-scroll{
       background-color: #ffffff !important;
      .el-tabs__nav{
        .el-tabs__item
        {
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5;
  margin:0px 0px 8px 0px !important;
.el-tabs__nav-wrap.is-scrollable{
 padding:0px !important;
}
  }
  }
</style>
<style>
    .editor {
    line-height: normal !important;
    height: 800px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
</style>
